<template>
	<view class="bizPage">
		<status-bar title="活动列表" />
		<view class="tabs bgwhite" :style="{top: totalHeight + 'px'}">
			<up-tabs :list="tabList" :scrollable="false" :lineColor="mainStore.color" lineWidth="28" :activeStyle="{color:'#222',fontWeight:'bold'}"
				@click="tabClick"></up-tabs>
		</view>
		<view class="padding20" style="margin-top: 44px;">
			<view class="item bgwhite m-bot20 p-re" @click="toUrl('/bizPage/activity/details?id=' + item.id)" v-for="(item,index) in list" :key="index">
				<image class="img" :src="imgUrls(item.cover)" mode="aspectFill"></image>
				<view class="padding20">
					<view class="size28 color-333 bold m-bot10">{{ item.name }}</view>
					<view class="m-bot10">
						<text class="iconfont icon-shijian color-999 m-right10"></text>
						<text class="size24 color-666">时间：{{ item.startTime }} 至 {{ item.endTime }}</text>
					</view>
					<view>
						<text class="iconfont icon-zuzhirenyuan color-999 m-right10"></text>
						<text class="size24 color-666">组织人：{{ item.organizer }}</text>
					</view>
				</view>
				<view class="right_top flexac p-ab" :style="{background: getBgColor(item)}">{{ item.statusName }}</view>
			</view>
			
			<up-empty :show="noData" mode="list" marginTop="100"></up-empty>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import { useMainStore } from '@/stores/index'
	import { toUrl, Toast, imgUrls } from '@/utils/utils.js'
	import Http from '@/utils/request.js'
	import statusBar from '../components/statusBar.vue'
	
	const mainStore = useMainStore()
	const totalHeight = computed(() => {
		return mainStore.statusBarHeight + mainStore.navBarHeight
	})
	const tabList = ref([
		{ name: '公司活动', is_dept: '1' },
		{ name: '平台活动', is_dept: '2' }
	])
	
	const list = ref([])
	const is_dept = ref('1')
	const page = ref(1)
	const limit = ref(10)
	const noData = ref(false)
	const noMore = ref(false)
	
	onLoad(() => {
		getList()
	})
	
	const getList = () => {
		noData.value = false
		noMore.value = false
		let url = '/hr/activity/getEnterpriseActivityList' // 查公司活动
		if(is_dept.value == 2) url = '/hr/activity/getActivityList' // 查平台活动
		Http.post({
			url,
			data: {
				pageNum: page.value,
				pageSize: limit.value
			},
			Typejson: false
		}).then(res => {
			if(res.code != 0) return Toast(res.msg)
			let result = res.rows || []
			list.value = page.value == 1 ? result : list.value.concat(result)
			if(!list.value.length) noData.value = true
			if(result.length < limit.value) noMore.value = true
		})
	}
	
	const tabClick = (item) => {
		is_dept.value = item.is_dept
		page.value = 1
		getList()
	}
	
	onReachBottom(() => {
		if(noMore.value) return
		page.value ++
		getList()
	})
	
	const getBgColor = (item) => {
		switch (item.statusName){
			case '进行中':
				return '#52A4FF'
			case '已结束':
				return '#CCC'
			default:
				return '#FFB543'
		}
	}
</script>

<style lang="scss" scoped>
	.bizPage {
		min-height: 100vh;
		background: #F9F9F9;
	}   
	.tabs {
		width: 100%;
		position: fixed;
		left: 0;
		z-index: 11;
	}
	.item {
		box-shadow: 0rpx 1rpx 4rpx 0rpx rgba(182,182,182,0.39);
		border-radius: 10rpx;
		border: 1rpx solid #E5E7E9;
		overflow: hidden;
		.img {
			width: 100%;
			height: 396rpx;
		}
		.right_top {
			width: 150rpx;
			height: 60rpx;
			border-radius: 0rpx 10rpx 0rpx 30rpx;
			font-size: 24rpx;
			color: #FFF;
			right: 0;
			top: 0;
		}
	}
</style>
